<template>
    <div class="fillcontain">
        <head-top>
        </head-top>
        <el-row style="margin-top: 20px;">
            <el-form ref="form" :model="form" label-width="100px">
                <el-col :span="5" :offset="1">
                    <el-form-item label="用户姓名:">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="1">
                    <el-form-item label="手机号码:">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="1">
                    <el-form-item label="城市代码:">
                        <el-input v-model="form.cityCode"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="1">
                    <el-button type="primary" @click="getUsers">查询</el-button>
                    <el-button type="primary" @click="handleAdd">添加用户</el-button>
                </el-col>
            </el-form>
        </el-row>

        <div class="table_container">
            <el-table
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%">
                <el-table-column
                        property="id"
                        label="用户id"
                        width="100">
                </el-table-column>
                <el-table-column
                        property="name"
                        label="用户姓名"
                        width="150">
                </el-table-column>
                <el-table-column
                        property="phone"
                        label="手机号码"
                        width="200">
                </el-table-column>
                <el-table-column
                        property="cityCode"
                        label="城市code"
                        width="150">
                </el-table-column>
                <el-table-column
                        property="birthday"
                        :formatter="dateFormat"
                        label="生日"
                        width="150">
                </el-table-column>
                <el-table-column
                        property="birthdayState"
                        label="生日短信"
                        width="100">
                    <template slot-scope="scope">
                        {{getChangeType3(scope.row.birthdayState)}}
                    </template>
                </el-table-column>
                <el-table-column
                        property="state"
                        label="天气短信"
                        width="100">
                    <template slot-scope="scope">
                        {{getChangeType(scope.row.state)}}
                    </template>
                </el-table-column>
                <el-table-column
                        width="300"
                        property="rule"
                        label="天气配置规则">
                    <template slot-scope="scope">
                        {{getChangeType2(scope.row.rule)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                        style="margin-top:15px;"
                        background
                        layout="prev, pager, next"
                        :current-page.sync="pagination.current"
                        :page-size.sync="pagination.size"
                        :total="pagination.count"
                        @current-change="handleCurrentChange">
                </el-pagination>
            </div>

            <el-dialog title="修改用户" v-model="dialogFormVisibleUpdate">
                <el-form :model="update">
                    <el-form-item label="id" label-width="100px" hidden>
                        <el-input v-model="update.id" auto-complete="off" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="用户姓名" label-width="100px">
                        <el-input v-model="update.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" label-width="100px">
                        <el-input v-model="update.phone" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="城市code" label-width="100px">
                        <el-input v-model="update.cityCode" auto-complete="off"></el-input>
                    </el-form-item>
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">生日</label>
                        <el-date-picker label-width="100px"
                                        v-model="update.birthday"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <el-form-item label="生日配置规则" label-width="100px">
                        <el-select v-model="update.birthdayState" placeholder="请选择">
                            <el-option
                                    v-for="item in options3"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="天气配置规则" label-width="100px">
                        <el-select v-model="update.state" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="update.rule" placeholder="请选择" size="30">
                            <el-option
                                    v-for="item in options2"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
                    <el-button type="primary" @click="updateUser">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="添加用户" v-model="dialogFormVisibleAdd">
                <el-form :model="add">
                    <el-form-item label="用户姓名" label-width="100px">
                        <el-input v-model="add.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" label-width="100px">
                        <el-input v-model="add.phone" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="城市code" label-width="100px">
                        <el-input v-model="add.cityCode" auto-complete="off"></el-input>
                    </el-form-item>
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 100px">生日</label>
                        <el-date-picker label-width="100px"
                                        v-model="add.birthday"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <el-form-item label="生日配置规则" label-width="100px">
                        <el-select v-model="add.birthdayState" placeholder="请选择">
                            <el-option
                                    v-for="item in options3"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="天气配置规则" label-width="100px">
                        <el-select v-model="add.state" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="add.rule" placeholder="请选择" size="30">
                            <el-option
                                    v-for="item in options2"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
                    <el-button type="primary" @click="saveUser">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
	import headTop from '../components/headTop'
	import {getUserList, getUserCount} from '@/api/getData'

	var msgapi = '/msgapi/...'
	export default {
		data() {
			return {
				tableData: [{
					registe_time: '2016-05-02',
					username: '王小虎',
					city: '上海市普陀区金沙江路 1518 弄'
				}],
				pagination: {
					current: 1,
					size: 3,
					count: 0,
					orderby: ''  //升降序
				},
				dialogFormVisibleUpdate: false,
				dialogFormVisibleAdd: false,
				form: {
					name: '',
					cityCode: '',
					phone: ''
				},
				add: {
					name: '',
					cityCode: '',
					phone: '',
					rule: '',
					state: '',
					birthday: '',
					birthdayState: ''
				},
				update: {
					id: '',
					state: '',
					name: '',
					cityCode: '',
					phone: '',
					rule: '',
					birthday: '',
					birthdayState: ''
				},
				options: [{
					value: '1',
					label: '开启'
				}, {
					value: '0',
					label: '关闭'
				}],
				options2: [{
					value: '1',
					label: '晚上发送明日预报(每日)'
				}, {
					value: '2',
					label: '晚上发送明日预报(仅极端天气)'
				}, {
					value: '3',
					label: '早上发送今日预报(每日)'
				}, {
					value: '4',
					label: '早上发送今日预报(仅极端天气)'
				}],
				options3: [{
					value: '1',
					label: '开启'
				}, {
					value: '0',
					label: '关闭'
				}],
			}
		},

		components: {
			headTop,
		},
		created() {
			this.initData();
		},
		methods: {
			async initData() {
				try {
					this.getUsers(this.pagination.current);
				} catch (err) {
					console.log('获取数据失败', err);
				}
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.pagination.current = val;

				this.getUsers(this.pagination.current)
			},
			async getUsers(current) {
				this.$axios({
					url: "http://127.0.0.1:9522/phone/view/getall/" + this.pagination.current + "/10/",
					method: "get",
					params: {
						name: this.form.name,
						cityCode: this.form.cityCode,
						phone: this.form.phone
					}
				}).then(res => {
					console.log(res)
					this.tableData = res.data.records;
					// 当前页
					this.pagination.current = res.data.current;
					this.pagination.size = res.data.size
					this.pagination.count = res.data.total
				})
			},
			handleEdit(index, row) {
				this.getSelectItemData(row)
				this.dialogFormVisibleUpdate = true;
			},
			handleAdd() {

				this.dialogFormVisibleAdd = true;
			},
			getSelectItemData(row) {
				console.log(row);
				this.update.name = row.name;
				this.update.cityCode = row.cityCode;
				this.update.phone = row.phone;
				this.update.id = row.id;
				this.update.state = row.state;
				this.update.rule = row.rule;
				this.update.birthday = row.birthday;
				this.update.birthdayState = row.birthdayState;
			},
			async updateUser() {
				console.log(this.update);
				if (this.update.name != '' && this.update.phone != '' && this.update.id != ''
					&& this.update.cityCode != '' && this.update.state != '' && this.update.rule != ''
					&& this.update.birthday != '' && this.update.birthdayState != '') {
					this.$axios({
						url: "http://127.0.0.1:9522/phone/update",
						method: "post",
						params: {
							id: this.update.id,
							name: this.update.name,
							cityCode: this.update.cityCode,
							phone: this.update.phone,
							rule: this.update.rule,
							state: this.update.state,
							birthday: this.$moment(this.update.birthday).format("YYYY-MM-DD"),
							birthdayState: this.update.birthdayState
						}
					}).then(res => {
						if (res.data == '1') {
							this.$notify({
								title: '成功！',
								message: '修改成功！',
								type: 'success',
								duration: 1500
							});
							this.dialogFormVisibleUpdate = false;
							this.getUsers();
						} else {
							this.$notify({
								title: '警告',
								message: '修改失败',
								type: 'warning',
								duration: 1500
							});
							this.dialogFormVisibleUpdate = false;
						}
					})
				} else {
					this.$notify({
						title: '警告',
						message: '请补充完用户全部信息后提交',
						type: 'warning',
						duration: 1500
					});
				}
			},
			async saveUser() {
				if (this.add.name != '' && this.add.phone != '' && this.add.cityCode != ''
					&& this.add.state != '' && this.add.rule != '' && this.add.birthday != '' && this.add.birthdayState != '') {
					this.$axios({
						url: "http://127.0.0.1:9522/phone/add/" + this.add.name + "/" + this.add.phone + "/"
							+ this.add.cityCode + "/" + this.add.state + "/" + this.add.rule + "/" + this.add.birthday + "/" + this.add.birthdayState,
						method: "get",
					}).then(res => {
						this.$notify({
							title: '成功',
							message: res.data,
							type: 'success',
							duration: 1500
						});
						this.dialogFormVisibleAdd = false;
						this.add.cityCode = '';
						this.add.name = '';
						this.add.phone = '';
						this.add.state = '';
						this.add.rule = '';
						this.add.birthday = '';
						this.add.birthdayState = '';
						this.getUsers();

					})
				} else {
					this.$notify({
						title: '警告',
						message: '请补充完用户全部信息后提交',
						type: 'warning',
						duration: 1500
					});
				}
			},
			async handleDelete(index, row) {
				this.$axios({
					url: "http://127.0.0.1:9522/phone/delete",
					method: "post",
					params: {
						id: row.id
					}
				}).then(res => {
					this.$notify({
						title: '成功',
						message: '删除成功',
						type: 'success',
						duration: 1500
					});
					this.getUsers();
				})
			},
			getChangeType(e) {
				for (var i = 0; i < this.options.length; i++) {
					if (this.options[i].value == e) {
						return this.options[i].label;
					}
				}
			},
			getChangeType2(e) {
				for (var i = 0; i < this.options2.length; i++) {
					if (this.options2[i].value == e) {
						return this.options2[i].label;
					}
				}
			},
			getChangeType3(e) {
				for (var i = 0; i < this.options3.length; i++) {
					if (this.options3[i].value == e) {
						return this.options3[i].label;
					}
				}
			},
			dateFormat: function (row, column) {
				var date = row[column.property];
				if (date == undefined) {
					return "";
				}
				return this.$moment(date).format("YYYY-MM-DD");
			},

		},
	}
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
</style>
